<md-card ng-if="selectedCluster">
    <table ng-if="settings" md-table class="table md-primary md-data-table">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <tr md-row>
            <th colspan=3>Database Backups</th>
            <th>
                <span style="display:inline-block;;margin: 2px;"
                    ng-click="saveBackupType(selectedLogicalBackup,selectedPhysicalBackup,selectedBinlogBackup,selectedBinlogBackupScript)"><i
                        style="display:inline-block;;margin: 2px;" class="fa fa-save" ></i></span>
            </th>
        </tr>
        <tr>
            <td colspan=4>
                Logical Backup: <span style="display:inline-block;;margin: 2px;"
                    class="label label-success">{{selectedCluster.config.backupLogicalType }}</span>
                <md-select name="selectedLogicalBackup" ng-model="selectedLogicalBackup">
                    <md-option ng-selected="{{key ==  selectedCluster.config.backupLogicalType}}"
                        ng-repeat="(key, value) in settings.backupLogicalList" ng-value="key">{{key}}</md-option>
                </md-select>
                Physical Backup: <span style="display:inline-block;;margin: 2px;"
                    class="label label-success">{{selectedCluster.config.backupPhysicalType }}</span>
                <md-select name="selectedPhysicalBackup" ng-model="selectedPhysicalBackup">
                    <md-option ng-selected="{{key ==  selectedCluster.config.backupPhysicalType}}"
                        ng-repeat="(key, value) in settings.backupPhysicalList" ng-value="key">{{key}}</md-option>
                </md-select>
                Binlog Backup: <span style="display:inline-block;;margin: 2px;"
                    class="label label-success">{{selectedCluster.config.binlogCopyMode }}</span>
                <md-select name="selectedBinlogBackup" ng-model="selectedBinlogBackup">
                    <md-option ng-selected="{{key ==  selectedCluster.config.binlogCopyMode}}"
                        ng-repeat="(key, value) in settings.backupBinlogList" ng-value="key">{{key}}</md-option>
                </md-select>
            </td>
        </tr>
        <tr ng-hide="selectedBinlogBackup != 'script'">
            <td colspan=4>Backup Binlog Script Path</td>
        </tr>
        <tr ng-hide="selectedBinlogBackup != 'script'">
            <td colspan=4>
                <span>
                    <input type="text" name="selectedBinlogBackupScript" value="selectedCluster.config.binlogCopyScript"
                        id="selectedBinlogBackupScript" maxlength="120" size="80"
                        ng-model="selectedBinlogBackupScript" />
                </span>
            </td>
        </tr>
    </table>
</md-card>
<md-card ng-if="selectedCluster">
    <table ng-if="settings" md-table class="table md-primary md-data-table">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <col style="width: 40%;">
        <col style="width: 10%;">
        <tr>
            <th colspan=4>Use Compression For Backup</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-switch ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false"
                    ng-true-value="true" ng-false-value="false" ng-model="selectedCluster.config.compressBackups"
                    ng-click="switchsettings('compress-backups')" aria-label="Use Compression For Backup">
                    <span ng-if="selectedCluster.config.compressBackups" class="label label-primary">On</span><span
                        ng-if="!selectedCluster.config.compressBackups" class="label label-warning">Off</span>

                </md-switch>
            </td>
        </tr>
        <tr>
            <th colspan=4>Backup Binlogs</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-switch ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false"
                    ng-true-value="true" ng-false-value="false" ng-model="selectedCluster.config.backupBinlogs"
                    ng-click="switchsettings('backup-binlogs')" aria-label="Auto rejoin using pseudo GTID">
                    <span ng-if="selectedCluster.config.backupBinlogs" class="label label-primary">On</span><span
                        ng-if="!selectedCluster.config.backupBinlogs" class="label label-warning">Off</span>

                </md-switch>
            </td>
        </tr>
        <tr>
            <th colspan=4>Backup Binlogs Keep files</th>
        </tr>
        <tr>
            <td colspan=4>
                <md-slider ng-disabled="selectedCluster.apiUsers[user].grants['cluster-settings']==false"
                    ng-value="selectedCluster.config.backupBinlogsKeep" md-discrete flex
                    ng-model="selectedBackupBinlogsKeep" ng-change="changebackupbinlogskeep(selectedBackupBinlogsKeep)"
                    step="1" min="0" max="10" aria-label="Backup binlogs keep files">
                </md-slider>

                <span class="label label-primary">{{selectedCluster.config.backupBinlogsKeep}}</span>

            </td>
        </tr>
    </table>

</md-card>